<template>
	<view class="box">
		<uNavbar title="签到" bgColor="transparent"></uNavbar>
		<view class="user_info">
			<view class="user_info_head">
				<image class="headimg"
					src="https://q5.itc.cn/q_70/images03/20240312/dafb237d64634fbabff5c406eea3ff0b.jpeg" mode="">
				</image>
				<view class="is_real">
					未实名
				</view>
			</view>
			<view class="user_info_top">
				<view class="name">
					小明同学
				</view>
				<text class="">
					166****9999
				</text>
			</view>
			<view class="user_info_bottom">
				<view class="cp" @click="gocp">
					战力值:10000.00
				</view>
				<view class="grade">
					<image src="/static/icon/dj.png" mode=""></image> 布衣
				</view>
			</view>
				<view class="rule">
					规则
				</view>
		</view>
		<view class="main">
			<view class="main_tit">
				<text>连续签到领好礼</text>
				<text style="margin-right: 38rpx;">福合通宝出售额度：1000.00</text>
			</view>
			<view class="main_list">
				<view class="main_item" :style="{ opacity: isSign ? 0.4 : 1 }">
					<view class="day">
						<image class="dayimg" src="../../static/image/day.png" mode=""></image>
						<text>1天</text>
					</view>
					<text class="signed">已签到</text>
					<image src="../../static/icon/fhtb.png" mode=""></image>
					<text class="num">1000额度</text>
				</view>
				<view class="main_item">
					<view class="day">
						<image class="dayimg" src="../../static/image/day.png" mode=""></image>
						<text>2天</text>
					</view>
					<image src="../../static/icon/fhtb.png" mode=""></image>
					<text class="num">1000额度</text>
				</view>
				<view class="main_item">
					<view class="day">
						<image class="dayimg" src="../../static/image/day.png" mode=""></image>
						<text>3天</text>
					</view>
					<image src="../../static/icon/fhtb.png" mode=""></image>
					<text class="num">1000额度</text>
				</view>
				<view class="main_item">
					<view class="day">
						<image class="dayimg" src="../../static/image/day.png" mode=""></image>
						<text>4天</text>
					</view>
					<image src="../../static/icon/fhtb.png" mode=""></image>
					<text class="num">1000额度</text>
				</view>
				<view class="main_item">
					<view class="day">
						<image class="dayimg" src="../../static/image/day.png" mode=""></image>
						<text>5天</text>
					</view>
					<image src="../../static/icon/fhtb.png" mode=""></image>
					<text class="num">1000额度</text>
				</view>
				<view class="main_item">
					<view class="day">
						<image class="dayimg" src="../../static/image/day.png" mode=""></image>
						<text>6天</text>
					</view>
					<image src="../../static/icon/fhtb.png" mode=""></image>
					<text class="num">1000额度</text>
				</view>
				<view class="main_item">
					<view class="day">
						<image class="dayimg" src="../../static/image/day.png" mode=""></image>
						<text>7天</text>
					</view>
					<image src="../../static/icon/fhtb.png" mode=""></image>
					<text class="num">1000额度</text>
				</view>
			</view>
			<view class="tip">
				已经连续签到1天
			</view>
			<view class="btn">
				立即签到
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				isSign:1
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #E0DDDA;
	}
	.user_info {
		width: 750rpx;
		height: 168rpx;
		margin-top: 20rpx;
		position: relative;

		.user_info_head {
			position: relative;
			width: 170rpx;
			height: 170rpx;
			margin-left: 32rpx;

			.headimg {
				width: 168rpx;
				height: 168rpx;
				border-radius: 50%;
				// margin-left: 32rpx;
			}

			.is_real {
				position: absolute;
				bottom: 0rpx;
				width: 168rpx;
				height: 44rpx;
				// font-family: iconfont;
				background-image: url("/static/image/headimg_bottom.png");
				background-size: 166rpx 44rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				// background: rgba(0,0,0,0.5);
				text-align: center;
				line-height: 44rpx;
			}
		}

		.user_info_top {
			position: absolute;
			top: 20rpx;
			left: 234rpx;
			display: flex;

			.name {
				font-family: iconfont;
				font-weight: 700;
				font-size: 36rpx;
				color: #FFFFFF;
			}

			>text {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.wallet_add {
			height: 52rpx;
			line-height: 52rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			position: absolute;
			top: 46rpx;
			left: 234rpx;
			display: flex;
			align-items: center;

			>image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 12rpx;
			}
		}

		.user_info_bottom {
			position: absolute;
			bottom: 20rpx;
			left: 234rpx;
			display: flex;

			.cp {
				width: 226rpx;
				height: 42rpx;
				background: linear-gradient(274deg, #3040FC 1%, #FF2CDF 100%);
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 42rpx;
			}

			.grade {
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				min-width: 94rpx;
				height: 42rpx;
				background: linear-gradient(274deg, #3040FC 1%, #FF2CDF 100%);
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 42rpx;

				>image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.user_info_icon {
			width: 42rpx;
			height: 42rpx;
			position: absolute;
			right: 28rpx;
			top: 50rpx;
		}
	}
	.rule{
		position: absolute;
		top: 40rpx;
		right: 0rpx;
		width: 126rpx;
		height: 42rpx;
		background: #93288F;
		text-align: center;
		border-radius: 29rpx 0rpx 0rpx 29rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 42rpx;
	}
	.main{
		width: 690rpx;
		height: 692rpx;
		background: #B8A185;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		border: 2rpx solid #FF2CDF;
		margin: 0 auto;
		margin-top: 40rpx;
		.main_tit{
			padding-top: 36rpx;
			margin-left: 36rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
		}
		.main_list{
			display: flex;
			flex-wrap: wrap;
			margin: 0 auto;
			margin-left: 10rpx;
			.main_item{
				width: 136rpx;
				margin: 15rpx;
				height: 178rpx;
				background: #48397A;
				border-radius: 20rpx;
				position: relative;
				.signed{
					position: absolute;
					bottom: 64rpx;
					left: 32rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					z-index: 99;
					opacity: 1 !important;
				}
				.day{
					width: 48rpx;
					height: 30rpx;
					position: relative;
					>image{
						width: 48rpx;
						height: 30rpx;
					}
					>text{
						width: 48rpx;
						height: 30rpx;
						position: absolute;
						top: 50%;
						left: 60%;
						transform: translate(-50%,-50%);
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}
				}
				>image{
					width: 56rpx;
					height: 56rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
				.num{
					width: 104rpx;
					height: 24rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					font-size: 24rpx;
					color: #FF2CDF;
					line-height: 24rpx;
					position: absolute;
					bottom: 20rpx;
					left: 16rpx;
				}
			}

		}
		.tip{
			width: 690rpx;
			text-align: center;
			font-weight: 400;
			font-size: 26rpx;
			color: #A6A5AF;
			margin-top: 12rpx;
		}
	}
	.btn{
		width: 614rpx;
		height: 80rpx;
		background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 472rpx 472rpx 472rpx 472rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 28rpx;
	}
</style>